<template>
  <div class="teacher-courses">
    <!-- Page Header -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">我的课程</h1>
        <p class="page-subtitle">管理您的所有课程内容</p>
      </div>
      <router-link to="/teacher/courses/create" class="btn btn-primary">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="16"></line>
          <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
        创建新课程
      </router-link>
    </div>

    <!-- Filters and Search -->
    <div class="filters-section">
      <div class="search-bar">
        <input 
          type="text" 
          placeholder="搜索课程..." 
          v-model="searchQuery"
          @input="handleSearch"
          class="search-input"
        >
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
      </div>
      
      <div class="filter-tabs">
        <button 
          v-for="tab in statusTabs" 
          :key="tab.value"
          :class="['filter-tab', { active: activeTab === tab.value }]"
          @click="activeTab = tab.value; loadCourses()"
        >
          {{ tab.label }}
          <span class="tab-count">{{ tab.count }}</span>
        </button>
      </div>
    </div>

    <!-- Course List -->
    <div class="courses-section">
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="courses.length === 0" class="empty-state">
        <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="var(--gray-400)">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
        </svg>
        <h3>{{ getEmptyStateTitle() }}</h3>
        <p>{{ getEmptyStateDescription() }}</p>
        <router-link to="/teacher/courses/create" class="btn btn-primary">创建第一个课程</router-link>
      </div>

      <div v-else class="course-grid">
        <div v-for="course in courses" :key="course.id" class="course-card">
          <!-- Course Cover -->
          <div class="course-cover-container">
            <img 
              :src="course.coverImageUrl || '/placeholder-course.jpg'" 
              :alt="course.title"
              class="course-cover"
            >
            <div class="course-status-badge" :class="course.status.toLowerCase()">
              {{ getStatusLabel(course.status) }}
            </div>
          </div>

          <!-- Course Info -->
          <div class="course-info">
            <h3 class="course-title">{{ course.title }}</h3>
            <p class="course-description">{{ course.description }}</p>
            
            <div class="course-meta">
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="9" cy="7" r="4"></circle>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
                <span>{{ course.enrollmentCount || 0 }} 名学生</span>
              </div>
              
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"></polygon>
                </svg>
                <span>{{ course.averageRating?.toFixed(1) || '5.0' }}</span>
              </div>
              
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12,6 12,12 16,14"></polyline>
                </svg>
                <span>{{ formatDate(course.updatedAt) }}</span>
              </div>
            </div>

            <div class="course-price">
              <span class="price">¥{{ course.price }}</span>
              <span class="difficulty">{{ getDifficultyLabel(course.difficulty) }}</span>
            </div>
          </div>

          <!-- Course Actions -->
          <div class="course-actions">
            <div class="action-buttons">
              <router-link 
                :to="`/courses/${course.id}`" 
                class="btn btn-secondary btn-sm"
                target="_blank"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                  <circle cx="12" cy="12" r="3"></circle>
                </svg>
                预览
              </router-link>
              
              <router-link 
                :to="`/teacher/courses/${course.id}/edit`" 
                class="btn btn-primary btn-sm"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                </svg>
                编辑
              </router-link>
            </div>

            <el-dropdown @command="(command: string) => handleCourseAction(command, course)" trigger="click">
              <button class="more-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="12" cy="5" r="1"></circle>
                  <circle cx="12" cy="19" r="1"></circle>
                </svg>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="course.status === 'DRAFT'" command="publish">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polygon points="5,3 19,12 5,21 5,3"></polygon>
                    </svg>
                    发布课程
                  </el-dropdown-item>
                  <el-dropdown-item v-if="course.status === 'PUBLISHED'" command="unpublish">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <rect x="6" y="4" width="4" height="16"></rect>
                      <rect x="14" y="4" width="4" height="16"></rect>
                    </svg>
                    下线课程
                  </el-dropdown-item>

                  <el-dropdown-item command="analytics">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"></polyline>
                    </svg>
                    数据分析
                  </el-dropdown-item>
                  <el-dropdown-item divided command="delete" class="text-danger">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polyline points="3,6 5,6 21,6"></polyline>
                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    </svg>
                    删除课程
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- Pagination -->
      <div v-if="totalPages > 1" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalElements"
          layout="prev, pager, next, jumper"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 数据分析对话框 -->
    <el-dialog
      v-model="showAnalyticsDialog"
      :title="`${selectedCourse?.title} - 数据分析`"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="selectedCourse" class="analytics-container">
        <el-row :gutter="20">
          <!-- 基础统计 -->
          <el-col :span="12">
            <el-card class="analytics-card">
              <template #header>
                <div class="card-header">
                  <span>📊 基础统计</span>
                </div>
              </template>
              <div class="stat-item">
                <span class="stat-label">选课人数：</span>
                <span class="stat-value">{{ courseStats.enrollmentCount || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">平均评分：</span>
                <span class="stat-value">{{ courseStats.averageRating || 0 }}/5.0</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">完成率：</span>
                <span class="stat-value">{{ courseStats.completionRate || 0 }}%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">总收入：</span>
                <span class="stat-value">¥{{ courseStats.totalRevenue || 0 }}</span>
              </div>
            </el-card>
          </el-col>
          
          <!-- 学习进度 -->
          <el-col :span="12">
            <el-card class="analytics-card">
              <template #header>
                <div class="card-header">
                  <span>📈 学习进度分布</span>
                </div>
              </template>
              <div class="progress-item">
                <span class="progress-label">未开始：</span>
                <el-progress :percentage="courseStats.notStartedRate || 0" />
              </div>
              <div class="progress-item">
                <span class="progress-label">学习中：</span>
                <el-progress :percentage="courseStats.inProgressRate || 0" status="warning" />
              </div>
              <div class="progress-item">
                <span class="progress-label">已完成：</span>
                <el-progress :percentage="courseStats.completedRate || 0" status="success" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <!-- 最近活动 -->
          <el-col :span="12">
            <el-card class="analytics-card">
              <template #header>
                <div class="card-header">
                  <span>⏱️ 最近7天活动</span>
                </div>
              </template>
              <div class="activity-list">
                <div v-for="activity in recentActivities" :key="activity.date" class="activity-item">
                  <span class="activity-date">{{ activity.date }}</span>
                  <span class="activity-count">{{ activity.count }} 人学习</span>
                </div>
                <div v-if="!recentActivities.length" class="no-data">
                  暂无活动数据
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 热门章节 -->
          <el-col :span="12">
            <el-card class="analytics-card">
              <template #header>
                <div class="card-header">
                  <span>🔥 热门章节</span>
                </div>
              </template>
              <div class="lesson-list">
                <div v-for="lesson in popularLessons" :key="lesson.id" class="lesson-item">
                  <span class="lesson-title">{{ lesson.title }}</span>
                  <span class="lesson-views">{{ lesson.views }} 次观看</span>
                </div>
                <div v-if="!popularLessons.length" class="no-data">
                  暂无章节数据
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAnalyticsDialog = false">关闭</el-button>
          <el-button type="primary" @click="exportAnalytics">导出报告</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { courseApi } from '@/api/course'

interface Course {
  id: number
  title: string
  description: string
  coverImageUrl?: string
  price: number
  difficulty: string
  status: string
  enrollmentCount: number
  averageRating?: number
  updatedAt: string
}

// 数据状态
const loading = ref(false)
const courses = ref<Course[]>([])
const searchQuery = ref('')
const activeTab = ref('all')
const currentPage = ref(1)
const pageSize = ref(12)
const totalElements = ref(0)

// 数据分析相关状态
const showAnalyticsDialog = ref(false)
const selectedCourse = ref<Course | null>(null)
const courseStats = ref({
  enrollmentCount: 0,
  averageRating: 0,
  completionRate: 0,
  totalRevenue: 0,
  notStartedRate: 0,
  inProgressRate: 0,
  completedRate: 0
})
const recentActivities = ref<Array<{date: string, count: number}>>([])
const popularLessons = ref<Array<{id: number, title: string, views: number}>>([])
const loadingAnalytics = ref(false)

// 计算属性
const totalPages = computed(() => Math.ceil(totalElements.value / pageSize.value))

const statusTabs = computed(() => [
  { label: '全部', value: 'all', count: courses.value.length },
  { label: '已发布', value: 'published', count: courses.value.filter(c => c.status === 'PUBLISHED').length },
  { label: '草稿', value: 'draft', count: courses.value.filter(c => c.status === 'DRAFT').length }
])

// 方法
const loadCourses = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      pageSize: pageSize.value
    }
    
    if (searchQuery.value) {
      params.keyword = searchQuery.value
    }
    
    if (activeTab.value !== 'all') {
      params.status = activeTab.value.toUpperCase()
    }
    
    const response = await courseApi.getTeacherCourses(params)
    courses.value = response.content || []
    totalElements.value = response.totalElements || 0
  } catch (error) {
    ElMessage.error('加载课程失败')
    console.error('Failed to load courses:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadCourses()
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  loadCourses()
}

const handleCourseAction = async (command: string, course: Course) => {
  switch (command) {
    case 'publish':
      await publishCourse(course)
      break
    case 'unpublish':
      await unpublishCourse(course)
      break

    case 'analytics':
      await showCourseAnalytics(course)
      break
    case 'delete':
      await deleteCourse(course)
      break
  }
}

const publishCourse = async (course: Course) => {
  try {
    await ElMessageBox.confirm(
      `确定要发布课程"${course.title}"吗？发布后学生即可购买学习。`,
      '发布课程',
      {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await courseApi.publishCourse(course.id)
    ElMessage.success('课程发布成功')
    loadCourses()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('发布失败')
    }
  }
}

const unpublishCourse = async (course: Course) => {
  try {
    await ElMessageBox.confirm(
      `确定要下线课程"${course.title}"吗？下线后学生将无法购买。`,
      '下线课程',
      {
        confirmButtonText: '下线',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await courseApi.unpublishCourse(course.id)
    ElMessage.success('课程已下线')
    loadCourses()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('下线失败')
    }
  }
}

const deleteCourse = async (course: Course) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除课程"${course.title}"吗？此操作不可撤销。`,
      '删除课程',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    
    await courseApi.deleteCourse(course.id)
    ElMessage.success('课程删除成功')
    loadCourses()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const getStatusLabel = (status: string) => {
  const labels: Record<string, string> = {
    'PUBLISHED': '已发布',
    'DRAFT': '草稿'
  }
  return labels[status] || status
}

const getDifficultyLabel = (difficulty: string) => {
  const labels: Record<string, string> = {
    'BEGINNER': '初级',
    'INTERMEDIATE': '中级',
    'ADVANCED': '高级'
  }
  return labels[difficulty] || difficulty
}

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

// 数据分析相关方法
const showCourseAnalytics = async (course: Course) => {
  selectedCourse.value = course
  showAnalyticsDialog.value = true
  await loadCourseAnalytics(course.id)
}

const loadCourseAnalytics = async (courseId: number) => {
  loadingAnalytics.value = true
  try {
    // 这里模拟数据，后续可以接入真实的API
    const mockStats = {
      enrollmentCount: Math.floor(Math.random() * 500) + 50,
      averageRating: Math.round((Math.random() * 2 + 3) * 10) / 10,
      completionRate: Math.floor(Math.random() * 60) + 30,
      totalRevenue: Math.floor(Math.random() * 10000) + 1000,
      notStartedRate: Math.floor(Math.random() * 30) + 10,
      inProgressRate: Math.floor(Math.random() * 40) + 30,
      completedRate: Math.floor(Math.random() * 30) + 20
    }
    
    const mockActivities = Array.from({length: 7}, (_, i) => ({
      date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toLocaleDateString(),
      count: Math.floor(Math.random() * 50) + 10
    })).reverse()
    
    const mockLessons = [
      { id: 1, title: '课程介绍', views: Math.floor(Math.random() * 200) + 100 },
      { id: 2, title: '基础概念', views: Math.floor(Math.random() * 150) + 80 },
      { id: 3, title: '实践案例', views: Math.floor(Math.random() * 180) + 90 },
      { id: 4, title: '进阶技巧', views: Math.floor(Math.random() * 120) + 60 },
      { id: 5, title: '总结回顾', views: Math.floor(Math.random() * 100) + 50 }
    ].sort((a, b) => b.views - a.views)
    
    courseStats.value = mockStats
    recentActivities.value = mockActivities
    popularLessons.value = mockLessons
    
  } catch (error) {
    ElMessage.error('加载数据分析失败')
    console.error('Failed to load analytics:', error)
  } finally {
    loadingAnalytics.value = false
  }
}

const exportAnalytics = () => {
  ElMessage.info('导出功能开发中，敬请期待')
}

const getEmptyStateTitle = () => {
  if (activeTab.value === 'published') return '暂无已发布的课程'
  if (activeTab.value === 'draft') return '暂无草稿课程'
  return '您还没有创建任何课程'
}

const getEmptyStateDescription = () => {
  if (activeTab.value === 'published') return '发布您的课程让更多学生受益'
  if (activeTab.value === 'draft') return '继续完善您的课程内容'
  return '创建您的第一个课程，开始您的教学之旅'
}

onMounted(() => {
  loadCourses()
})
</script>

<style scoped>
/* 数据分析对话框样式 */
.analytics-container {
  padding: 0;
}

.analytics-card {
  margin-bottom: 16px;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.stat-value {
  color: #303133;
  font-weight: 600;
  font-size: 16px;
}

.progress-item {
  margin-bottom: 16px;
}

.progress-label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.activity-list,
.lesson-list {
  max-height: 200px;
  overflow-y: auto;
}

.activity-item,
.lesson-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child,
.lesson-item:last-child {
  border-bottom: none;
}

.activity-date,
.lesson-title {
  color: #303133;
  font-size: 14px;
}

.activity-count,
.lesson-views {
  color: #409eff;
  font-weight: 600;
  font-size: 13px;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 20px 0;
  font-size: 14px;
}

.dialog-footer {
  text-align: right;
}

.teacher-courses {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-6);
  background-color: var(--bg-secondary);
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  background: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2) 0;
  color: var(--text-primary);
}

.page-subtitle {
  color: var(--text-secondary);
  margin: 0;
}

.filters-section {
  background: var(--white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}

.search-bar {
  position: relative;
  margin-bottom: var(--space-6);
}

.search-input {
  width: 100%;
  max-width: 400px;
  height: 48px;
  padding: 0 var(--space-4) 0 var(--space-12);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  background-color: var(--gray-50);
  transition: all var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(236, 82, 82, 0.1);
}

.search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.filter-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.filter-tab:hover {
  color: var(--text-primary);
}

.filter-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-count {
  background: var(--gray-200);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.filter-tab.active .tab-count {
  background: var(--primary-color);
  color: white;
}

.courses-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  padding: var(--space-6);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12);
  color: var(--text-secondary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-4) 0;
}

.empty-state p {
  margin: 0 0 var(--space-6) 0;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-6);
}

.course-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  background: var(--white);
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-medium);
}

.course-cover-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.course-card:hover .course-cover {
  transform: scale(1.05);
}

.course-status-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: white;
}

.course-status-badge.published {
  background-color: var(--success-color);
}

.course-status-badge.draft {
  background-color: var(--warning-color);
}

.course-info {
  padding: var(--space-5);
}

.course-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2) 0;
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-4) 0;
  height: 2.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--line-height-normal);
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.course-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.difficulty {
  background: var(--gray-100);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.course-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-light);
  background: var(--gray-50);
}

.action-buttons {
  display: flex;
  gap: var(--space-2);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.more-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.more-btn:hover {
  background: var(--gray-200);
  color: var(--text-primary);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.text-danger {
  color: var(--error-color) !important;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  
  .course-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-tabs {
    flex-wrap: wrap;
  }
}
</style>

